<template>
  <view class="p-[20rpx]">
    <view class="text-[32rpx] font-bold text-center mb-[40rpx]">客服中心</view>
    
    <!-- 客服介绍 -->
    <view class="bg-blue-50 border border-blue-200 rounded-[20rpx] p-[30rpx] mb-[30rpx]">
      <view class="text-[28rpx] font-semibold text-blue-600 mb-[20rpx]">华声康护客服</view>
      <view class="text-[24rpx] text-blue-700 mb-[10rpx]">
        • 专业护理服务咨询
      </view>
      <view class="text-[24rpx] text-blue-700 mb-[10rpx]">
        • 健康管理指导
      </view>
      <view class="text-[24rpx] text-blue-700">
        • 7×24小时在线服务
      </view>
    </view>
    
    <!-- 呼叫中心按钮 -->
    <view class="bg-white rounded-[20rpx] p-[30rpx] mb-[30rpx]">
      <view class="text-[28rpx] font-semibold mb-[20rpx]">联系客服</view>
      <view class="text-[24rpx] text-gray-600 mb-[30rpx]">
        点击下方按钮联系客服
      </view>
      
      <button 
        @click="openCustomerService" 
        :disabled="loading"
        class="w-full bg-[#3d8944] text-white py-[20rpx] rounded-[10rpx] text-[28rpx]"
        :class="{ 'opacity-50': loading }"
      >
        {{ loading ? '连接中...' : '呼叫客服' }}
      </button>
    </view>

    <!-- 使用说明 -->
    <view class="bg-gray-50 rounded-[20rpx] p-[30rpx] mt-[30rpx]">
      <view class="text-[28rpx] font-semibold mb-[20rpx]">使用说明</view>
      <view class="text-[24rpx] text-gray-600 mb-[10rpx]">
        点击"呼叫客服"按钮会打开微信原生客服会话
      </view>
      <view class="text-[24rpx] text-gray-600">
        客服会收到您的消息并为您提供专业服务
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Taro from '@tarojs/taro'

const loading = ref(false)

// 打开客服会话
const openCustomerService = () => {
  loading.value = true
  
  try {
    // 打开客服会话
    Taro.openCustomerServiceChat({
      extInfo: {
        url: 'https://work.weixin.qq.com/kfid/kfc123456789' // 替换为你的客服链接
      },
      corpId: 'your-corp-id', // 替换为你的企业ID
      success: (res) => {
        // 客服会话打开成功
        Taro.showToast({
          title: '客服会话已打开',
          icon: 'success',
          duration: 2000
        })
      },
      fail: (err) => {
        // 客服会话打开失败
        Taro.showToast({
          title: '客服会话打开失败',
          icon: 'error',
          duration: 2000
        })
      },
      complete: () => {
        loading.value = false
      }
    })
  } catch (err: any) {
    loading.value = false
    Taro.showToast({
      title: '打开客服会话失败',
      icon: 'error',
      duration: 2000
    })
  }
}
</script> 